<template>
    <div>
        <button @click="changeData">修改</button>
    </div>
</template>

<script>
    import { ref, reactive, watch } from 'vue';

    export default {
        setup() {
            // 定义可响应式对象
            const info = reactive({name: 'leon', age: 18})
            const name = ref('leon')

            // 侦听器
            // watch([info, name], ([newInfo, newName], [oldInfo, oldName]) => {
            //     console.log(newInfo, newName, oldInfo, oldName);
            // })
            watch([() => ({...info}), name], ([newInfo, newName], [oldInfo, oldName]) => {
                console.log(newInfo, newName, oldInfo, oldName);
            })

            const changeData = () => {
                info.name = 'kobe';
            }

            return {
                changeData,
                info
            }
        }
    }
</script>

<style scoped>

</style>